<template>
	<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
		<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
		<view class="tui-pro-detail">
			<view class="tui-product-title tui-border-radius">
				<view class="tui-price__box">
					<view class="tui-pro-pricebox tui-padding">
						<view class="tui-pro-price">
							<view>
								<text>￥</text>
								<text class="tui-price">{{ formatPrice(storeInfo.price, 0) }}</text>
								<text>.{{ formatPrice(storeInfo.price, 1) }}</text>
							</view>
							<view class="tui-original-price tui-white__gray" v-text="'￥' + storeInfo.otPrice"></view>

						</view>
						<view class="tui-sold tui-white__gray">
							<text>已抢{{ storeInfo.sales }}件</text>
							<tui-tag v-if="seckillStatus != 2" type="white" plain size="24rpx" padding="8rpx"
								:scaleMultiple="0.94">限时秒杀</tui-tag>
						</view>
					</view>
					<view class="tui-right__box">
						<image v-if="seckillStatus == 2"
							src="https://h5.ylsp.vip/file/static/img_seckillgood_seckill.png" class="tui-seckill__img"
							mode="widthFix"></image>
						<tui-button v-if="seckillStatus == 2" type="danger" disabled shape="circle" width="140rpx"
							height="42rpx" :size="24">{{ seckillStatus == 1 ? '活动已结束' : '即将开抢' }}</tui-button>
						<text v-if="seckillStatus != 2" class="tui-color-red">距结束还剩:</text>
						<count-down :isDay="false" :tipText="' '" :dayText="' '" :hourText="' : '" :minuteText="' : '"
							:secondText="' '" :datatime="datatime"></count-down>
					</view>
				</view>
				<view class="tui-pro-titbox">
					<view class="tui-pro-title">{{ storeInfo.title }}</view>
				</view>
				<view class="tui-padding">
					<view class="tui-sale-info tui-size tui-gray">
						<view>库存：{{ storeInfo.stock }}</view>
						<view>销量{{ storeInfo.sales }}</view>
						<view class="iconfont icon-fenxiang" @click="listenerActionSheet" v-if="whether_share == 'Y'">
							<br />
							<text class="shareButton">分享</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
			<view>
				<text>{{ attrTxt }}：</text>
				<text class="atterTxt">{{ cartNum }}件</text>
			</view>
			<view class="iconfont icon-jiantou"></view>
		</view>
		<view class="product-intro">
			<text class="title"><text>产品介绍</text></text>
			<view class="conter" v-html="storeInfo.description"></view>
		</view>

		<!-- 操作栏 -->
		<view style="height: 100rpx"></view>

		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left">

				<button class="tui-operation-item" @click="homeClick">
					<view class="iconfont icon-shouye-xianxing"></view>
					<view class="tui-operation-text tui-scale-small">首页</view>
				</button>



			</view>
			<view class="tui-operation-left">
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect"
					v-if="userCollect">
					<view class="iconfont icon-shoucang1"></view>
					<view class="tui-operation-text tui-scale-small">收藏</view>
				</view>
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect"
					v-if="!userCollect">
					<view class="iconfont icon-shoucang"></view>
					<view class="tui-operation-text tui-scale-small">收藏</view>
				</view>
			</view>


			<view class="tui-operation-right" v-if="seckillStatus == 1 && storeInfo.num > 0 && storeInfo.stock > 0">
				<view class="tui-flex-1">
					<tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="tapBuy">立即抢购</tui-button>
				</view>
			</view>
			<view class="tui-operation-right" v-if="seckillStatus == 1 && storeInfo.num <= 0 && storeInfo.stock <= 0">
				<view class="tui-flex-1">
					<tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>已售罄</tui-button>
				</view>
			</view>
			<view class="tui-operation-right" v-if="seckillStatus == 2">
				<view class="tui-flex-1">
					<tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>即将开始</tui-button>
				</view>
			</view>
			<view class="tui-operation-right" v-if="seckillStatus == 0">
				<view class="tui-flex-1">
					<tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>活动已结束</tui-button>
				</view>
			</view>
		</view>

		<ProductWindow v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
		<!-- 分享海报 -->
		<SeckillPoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
			:posterData="posterData" :goodId="id"></SeckillPoster>
	</view>
</template>
<style scoped lang="less">
	.noscroll {
		height: 100%;
		overflow: hidden;
	}
</style>
<script>
	import ProductConSwiper from '@/components/ProductConSwiper'
	import CountDown from '@/components/CountDown'
	import ProductWindow from '@/components/ProductWindow'
	import SeckillPoster from '@/components/SeckillPoster'
	import {
		getSeckillDetail,
		getSeckillConfig
	} from '@/api/activity'
	import {
		postCartAdd
	} from '@/api/store'
	import {
		mapGetters
	} from "vuex";
	import {
		imageBase64
	} from '@/api/public'
	import {
		isWeixin,
		parseQueryItem,
		handleUrlParam,
		systemPrompt
	} from "@/utils";
	import {
		getCoupon,
		getCollectAdd,
		getCollectDel,
		getUserInfo
	} from '@/api/user'
	const NAME = 'SeckillDetails'

	export default {
		name: 'SeckillDetails',
		components: {
			ProductConSwiper,
			CountDown,
			ProductWindow,
			SeckillPoster,
		},
		props: {},
		data: function() {
			return {
				seckillStatus: '',
				domStatus: false,
				posterData: {
					image: '',
					title: '',
					price: '',
					code: '',
				},
				posterImageStatus: false,
				id: 0,
				action: '',
				imgUrls: [],
				storeInfo: [],
				replyCount: 0,
				reply: [],
				whether_share: '',
				cartNum: 1,
				attrTxt: '请选择',
				productValue: [],
				attrValue: '',
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
				datatime: 0,
				userCollect: false,
			}
		},
		computed: mapGetters(["isLogin", "location", "userInfo"]),
		mounted: function() {

		},
		onShow() {
			this.id = this.$yroute.query.id

			if (this._route.query.id) {
				this.rebateId = this._route.query.id;
			} else {
				let url = parseQueryItem();
				if (!url) {
					url = handleUrlParam(getCurrentPageUrlWithArgs())
				}
				if (url) {

					var scene = decodeURIComponent(url.scene)

					const part = scene.split('-');
					const parts = part[0].split('=');
					const id = parts[1];
					this.id = id;
				} else {
					this.id = this._route.query.id;
				}
			}

			if (!this.$store.getters.token) {
				this.$yrouter.reLaunch({
					path: "/pages/authorization/index"
				});
			}
			this.mountedStart();
		},
		methods: {
			formatPrice(price, index) {
				if (price) {
					return price.split('.')[index]
				}
				return ''
			},
			openAlone: function() {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: this.storeInfo.productId,
					},
				})

			},
			listenerActionSheet: function() {
				if (!this.userInfo.status) {
					systemPrompt()
					return
				}
				if (this.userInfo.spreadUid == 0 && this.userInfo.uid != 666) {
					uni.showModal({
						title: '提示',
						content: '您还没有上级，暂不能使用分享海报！',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
					return
				}
				if (isWeixin() === true) {
					this.weixinStatus = true;
				}
				this.posters = true;

				this.setPosterImageStatus()
			},
			routerGo(item) {
				this.$yrouter.push({
					path: '/pages/user/CustomerList/index',
				})
			},
			//收藏商品
			setCollect: function() {
				let that = this,
					id = that.storeInfo.id,
					category = 'product'
				if (that.userCollect) {
					getCollectDel(id, category).then(function() {
						that.userCollect = !that.userCollect
					})
				} else {
					getCollectAdd(id, category).then(function() {
						that.userCollect = !that.userCollect
					})
				}
			},
			mountedStart: function() {
				var that = this
				getSeckillConfig().then(res => {
					that.seckillStatus = res.data.seckillTime[0].status
					that.datatime = parseInt(res.data.seckillTime[0].stop)
				})
				getSeckillDetail(that.id).then(res => {
					that.userCollect = res.data.storeSeckillVo.userCollect
					res.data.storeSeckillVo.storeInfo.description = res.data.storeSeckillVo.storeInfo
						.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
					that.$set(that.attr, 'productAttr', res.data.storeSeckillVo.productAttr)
					that.$set(that, 'productValue', res.data.storeSeckillVo.productValue)
					that.$set(that, 'storeInfo', res.data.storeSeckillVo.storeInfo)
					that.$set(that, 'imgUrls', res.data.storeSeckillVo.storeInfo.sliderImageArr)
					that.$set(that, 'replyCount', res.data.storeSeckillVo.replyCount)
					that.$set(that, 'reply', res.data.storeSeckillVo.reply)
					that.posterData.image = that.storeInfo.image_base
					that.whether_share = res.data.whether_share

					that.updateTitle()
					if (that.storeInfo.title.length > 30) {
						that.posterData.title = that.storeInfo.title.substring(0, 30) + '...'
					} else {
						that.posterData.title = that.storeInfo.title
					}
					that.posterData.price = that.storeInfo.price
					that.posterData.code = that.storeInfo.code_base
					that.domStatus = true
					that.DefaultSelect()
				})
			},
			updateTitle() {},

			homeClick() {
				this.$yrouter.switchTab("/pages/home/index");
			},
			setPosterImageStatus: function() {

				this.posterImageStatus = !this.posterImageStatus
			},
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr
				let value = []
				for (let i = 0; i < productAttr.length; i++) {
					this.$set(productAttr[i], 'index', 0)
					value.push(productAttr[i].attrValueArr[0])
				}
				let productSelect = this.productValue[value.sort().join(',')]
				if (productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
					this.$set(this.attr.productSelect, 'image', productSelect.image)
					this.$set(this.attr.productSelect, 'price', productSelect.seckillPrice)
					this.$set(this.attr.productSelect, 'stock', productSelect.seckillStock)
					this.$set(this.attr.productSelect, 'unique', productSelect.unique)
					this.$set(this.attr.productSelect, 'cart_num', 1)
					this.$set(this, 'attrValue', value.sort().join(','))
					this.$set(this, 'attrTxt', '已选择')
				} else if (!productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
					this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
					this.$set(this.attr.productSelect, 'stock', 0)
					this.$set(this.attr.productSelect, 'unique', '')
					this.$set(this.attr.productSelect, 'cart_num', 0)
					this.$set(this, 'attrValue', '')
					this.$set(this, 'attrTxt', '请选择')
				} else if (!productSelect && !productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
					this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
					this.$set(this.attr.productSelect, 'stock', this.storeInfo.seckillStock)
					this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '')
					this.$set(this.attr.productSelect, 'cart_num', 1)
					this.$set(this, 'attrValue', '')
					this.$set(this, 'attrTxt', '请选择')
				}
			},
			changeFun: function(opt) {
				if (typeof opt !== 'object') opt = {}
				let action = opt.action || ''
				let value = opt.value === undefined ? '' : opt.value
				this[action] && this[action](value)
			},
			changeattr: function(res) {
				var that = this
				that.attr.cartAttr = res
			},
			ChangeCartNum: function(changeValue) {
				let productSelect = this.productValue[this.attrValue]
				if (productSelect === undefined && !this.attr.productAttr.length) {
					productSelect = this.attr.productSelect
				}
				if (productSelect === undefined) return
				let stock = productSelect.stock || 0
				let num = this.attr.productSelect
				if (changeValue) {
					if (num) num.cart_num++
					if (num.cart_num > this.storeInfo.num) {
						num.cart_num = this.storeInfo.num
						uni.showToast({
							title: '限购' + this.storeInfo.num +'件',
							icon: 'none',
							duration: 2000,
						})
					}

					if (num.cart_num > stock) {
						this.$set(this.attr.productSelect, 'cart_num', stock)
						this.$set(this, 'cartNum', stock)
					} else {
						this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
						this.$set(this, 'cartNum', num.cart_num)
					}
				} else {
					num.cart_num--
					if (num.cart_num < 1) {
						this.$set(this.attr.productSelect, 'cart_num', 1)
						this.$set(this, 'cartNum', 1)
					} else {
						this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
						this.$set(this, 'cartNum', num.cart_num)
					}
				}
			},
			//选择属性；
			ChangeAttr: function(res) {
				// 修改了规格
				let productSelect = this.productValue[res.value]
				if (productSelect) {
					this.attr.productAttr[res.indexw].index = res.indexn
					this.$set(this.attr.productSelect, 'image', productSelect.image)
					this.$set(this.attr.productSelect, 'price', productSelect.seckillPrice)
					this.$set(this.attr.productSelect, 'stock', productSelect.seckillStock)
					this.$set(this.attr.productSelect, 'unique', productSelect.unique)
					this.$set(this.attr.productSelect, 'cart_num', 1)
					this.$set(this, 'attrValue', res.value)
					this.$set(this, 'attrTxt', '已选择')
				} else {
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
					this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
					this.$set(this.attr.productSelect, 'stock', 0)
					this.$set(this.attr.productSelect, 'unique', '')
					this.$set(this.attr.productSelect, 'cart_num', 0)
					this.$set(this, 'attrValue', '')
					this.$set(this, 'attrTxt', '请选择')
				}
			},
			selecAttrTap: function() {
				this.attr.cartAttr = true
				this.isOpen = true
			},
			tapBuy: function() {
				var that = this
				if (!this.userInfo.status) {
					systemPrompt()
					return
				}
				if (this.userInfo.uid != 666) {
					if (this.userInfo.spreadUid == 0) {
						uni.showToast({
							title: "该用户没有上级无法购买商品，请扫描推广二维码注册用户再购买",
							icon: "none",
							duration: 3000,
						});
						return;
					}
				}

				if (this.userInfo.phone == '') {
					uni.showToast({
						title: "您还未绑定手机，请前往个人中心绑定手机再购买",
						icon: "none",
						duration: 3000,
					});
					return;
				}
				if (that.attr.cartAttr == false) {
					that.attr.cartAttr = !this.attr.attrcartAttr
				} else {
					var data = {}
					data.productId = that.storeInfo.productId
					data.cartNum = that.attr.productSelect.cart_num
					data.uniqueId = that.attr.productSelect.unique
					data.secKillId = that.storeInfo.id
					data.new = 1
					postCartAdd(data)
						.then(res => {
							that.$yrouter.push({
								path: '/pages/order/OrderSubmission/index',
								query: {
									id: res.data.cartId,
								},
							})
						})
						.catch(err => {
							uni.showToast({
								title: err.msg || err.response.data.msg || err.response.data.message,
								icon: 'none',
								duration: 2000,
							})
						})
				}
			},
		},
	}
</script>
<style lang="less">
	.product-con .nav {
		padding: 0 0.2 * 100rpx;
	}

	.product-con .footer .bnt .buy.bg-color-hui {
		background: #ccc;
	}

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;

		.iconfont {
			text-align: center;
		}
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.shareButton {
		font-size: 28rpx;
		margin-top: 16rpx;
		display: block;
	}

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-white__gray {
		color: rgba(255, 255, 255, 0.8);
		font-weight: normal;
		font-size: 26rpx;
	}

	.tui-color-red {
		color: #eb0909;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
	}

	.tui-product-title {
		background: #fff;
		padding-bottom: 30rpx;
	}

	.tui-price__box {
		width: 100%;
		height: 130rpx;
		display: flex;
	}

	.tui-pro-pricebox {
		width: 540rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #ffffff;
		font-size: 26rpx;
		line-height: 26rpx;
		background: linear-gradient(-30deg, #ff1f2e, #f52c6c);
		flex-shrink: 0;
	}

	.tui-pro-price {
		display: flex;
		align-items: flex-end;
	}

	.tui-price {
		font-size: 44rpx;
		line-height: 42rpx;
	}

	.tui-sold {
		width: 100%;
		height: 44rpx;
		padding-left: 4rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-decoration: line-through;
	}

	.tui-right__box {
		flex: 1;
		background-color: #ffe5e5;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tui-right__box text {
		text-align: center;
		padding-bottom: 12rpx;
	}

	.tui-seckill__img {
		width: 146rpx;
		height: 26rpx;
		margin-bottom: 16rpx;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}

	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		display: table;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: table-cell;
		vertical-align: middle;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		background: none;
		padding: 0;
		border: 0;
		line-height: 1em;

		&:after {
			display: none;
		}

		.tui-operation-text {
			margin-top: 9rpx;
			line-height: 1em;
		}
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		display: table-cell;
		vertical-align: middle;
		box-sizing: border-box;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 6rpx;
	}

	.tui-img__clock {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}
</style>
